<template>
  <view class="debug-banner-view" v-if="!isRelease">
    <view class="debug-banner">DEBUG</view>
  </view>
</template>

<script>
import { isRelease } from '@/env'
export default {
  name: 'DebugBanner',
  components: {},
  data () {
    return {}
  },
  props: {},
  computed: {
    isRelease () {
      return isRelease()
    }
  },
  mounted () {},
  methods: {},
  watch: {}
}
</script>

<style scoped lang="less">
.debug-banner-view {
  position: fixed;
  z-index: 1000000;
  top: 0;
  right: 0;
  width: 150rpx;
  height: 150rpx;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.6;
  .debug-banner {
    text-align: center; // 文本居中
    position: absolute; // 绝对定位
    background-color: red; // 背景色
    color: #fff;
    width: 130%;
    height: 48rpx;
    font-size: 24rpx;
    line-height: 48rpx;
    top: 22rpx;
    left: 5%;
    transform: rotate(45deg);
  }
}
</style>
